<template>
  <div id="publicVideoIdFlag" class="xgbd bg1 nBox">
    <div class="xgbdTit pTit">{{itemData.title}}</div>
    <div class="xgbdCon borderCon">
      <ul class="clearfix newsListShow">
        <li v-for="item in itemData.service">
          <a :href="routineFlag+item.id">
            <img :src="item.image">
            <p>{{item.title}}</p>
          </a>
        </li>
      </ul>
      <a href="javascript:void (0)" @click="loadMore" class="jzgd">加载更多</a>
      <a href="javascript:void (0)" class="jzgdFlag" style="display: none;font-size: 16px;background:red;text-align:center;margin: 0 auto;margin-bottom: 20px;width:150px;height: 34px;line-height: 34px;color: #fff;border-radius: 5px;">数据见底啦!</a>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Vx',
    mounted: function () {

    },
    methods: {
      loadMore: function () {
        var me = this;
        //请求接口获取 另外 9 条 视频数据
        me.$http.get('http://m.nsr.com.cn/xinsilu/v1/column/content/259?max=9&offset='+me.offsetFlag+'&type=2&siteid=1', {
          params: {}
        }).then(response => {
          if (response.data.code == 'R0000000') {
            //请求接口成功
            me.videosData = response.data.data.returnList;
            //无数据了
            if(me.videosData.length == 0){
              $('.jzgdFlag').css('display','block');
              $('.jzgd').css('display','none');
            }else{
              //有数据时循环重构数据，追加在ul标签后面
              for(var i = 0;i< me.videosData.length;i++){
                var liStr = "<li>";
                liStr += '<a href="'+document.location.pathname+'#/kidsworld/videoDetail?infoId='+me.videosData[i]['id']+'">';
                liStr += '<img src="'+me.videosData[i]['image']+'">';
                liStr += '<p>'+me.videosData[i]['title']+'</p>';
                liStr += '</a>';
                liStr += '</li>';
                $(".newsListShow").append(liStr); //在ul标签上动态添加li标签
              }
              //偏移量 往前推进
              me.offsetFlag = me.offsetFlag + me.videosData.length;
            }
          }else{
            //请求接口失败
            $('.jzgdFlag').css('display','block');
            $('.jzgd').css('display','none');
          }
        }, response => {
        });
      }
    },
    props: ['itemData'],
    //数据
    data(){
      return {
        list:{},
        routineFlag:document.location.pathname+'#/kidsworld/videoDetail?infoId=',//视频详情页跳转路由
        offsetFlag: this.itemData.service.length?this.itemData.service.length:9,//查询视频时的数据偏移量
        videosData:{},//新获取的 9 条 视频数据
      }
    }
  }
</script>


<style>
</style>
